body {
	display: flex;
	flex-direction: column;
}
main {
	flex-grow: 1;
	width: 100%;
	padding: 1rem;
	background-color: #0f0f0f;
	height: 40rem;

	video {
		width: 100%;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		// z-index: 1;
	}
	p > {
		bottom: 1rem;
		color: #fff;
		span {
			display: block;
		}
		.bigger {
			display: inline-block;
			font-size: 80px;
			font-weight: bold;
			margin-bottom: 1rem;
		}
	}
}
footer {
	height: 5rem;
	justify-content: space-around;
	align-items: center;
	span {
		font-size: 40px !important;
		font-weight: bolder !important;
	}
}
#process {
	width: 0%;
	height: 5rem;
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: rgb(114, 165, 165);
	z-index: -1;
}
#mask {
	position: fixed;
	left: 0;
	top: 0;
	display: none;
	width: 100%;
	height: 100%;
	background-color: rgba(29, 149, 205, 0.8);
	padding: 1rem 1rem;
	color: #fff;
	#word {
		font-size: 37px;
		font-weight: bold;
	}
	#continue {
		width: 100%;
		padding: 0 2rem;
		justify-content: space-between;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		span {
			width: 7.5rem;
			height: 7.5rem;
			border-radius: 50%;
			font-size: 60px;
			display: inline-block;
			line-height: 5.5rem;
			text-align: center;
		}
		& > span:first-child {
			background-color: #79f0c2;
			padding-top: 1rem;
		}
		& > span:last-child {
			background-color: #ff6060;
			padding-top: 1rem;
		}
	}
	#course {
		width: 95%;
		height: 7.5rem;
		top: 74%;
		left: 50%;
		transform: translate(-50%, -51%);
		border-radius: 10px;
		border: 1px solid #d2d1d1;
		box-shadow: 1px 1px 4px 4px;
		& > p:first-child {
			border-right: 1px solid #d2d1d1;
			box-shadow: 1px 1px 4px 4px;
		}
		& > p:last-child {
			text-align: center;
			padding: 1rem;
			span {
				display: block;
			}
			.bigger {
				font-size: 30px;
				font-weight: bold;
				margin-top: 1rem;
			}
		}
		#img {
			width: 100%;
			height: 100%;
		}
	}
}
